
<!-- Alerts & Messages
================================================== -->

<section id="form-states">
    <div class="row-fluid">
        <div class="span12">
            <div class="alert alert-block">
                <a title="Bootstrap Themes Generator" class="close">&times;</a>
                <h4 class="alert-heading">Alert block</h4>
                <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
            </div>
        
		    <div class="row-fluid">
		        <div class="span4">
		            <div class="alert alert-error">
		                <a title="Bootstrap Themes Generator" class="close">&times;</a>
		                <strong>Error</strong> Change a few things up and try submitting again.
		            </div>
		        </div>
		        <div class="span4">
		            <div class="alert alert-success">
		                <a title="Bootstrap Themes Generator" class="close">&times;</a>
		                <strong>Success</strong> You successfully read this important alert message.
		            </div>
		        </div>
		        <div class="span4">
		            <div class="alert alert-info">
		                <a title="Bootstrap Themes Generator" class="close">&times;</a>
		                <strong>Information</strong> This alert needs your attention, but it's not super important.
		            </div>
		        </div>
		    </div>
    
		    <div class="control-group warning">
		        <label class="control-label" for="inputWarning">Input with warning</label>
		        <div class="controls">
		            <input type="text" id="inputWarning">
		            <span class="help-inline">Something may have gone wrong</span>
		        </div>
		    </div>
		    <div class="control-group error">
		        <label class="control-label" for="inputError">Input with error</label>
		        <div class="controls">
		            <input type="text" id="inputError">
		            <span class="help-inline">Please correct the error</span>
		        </div>
		    </div>
		    <div class="control-group success">
		        <label class="control-label" for="inputSuccess">Input with success</label>
		        <div class="controls">
		            <input type="text" id="inputSuccess">
		            <span class="help-inline">Woohoo!</span>
		        </div>
		    </div>

		    <!--div class="row-fluid">
		        <div class="span4">
		            <div class="progress">
		                    <div class="bar" style="width: 60%;"></div>
		            </div>
		        </div>
		        <div class="span4">
		            <div class="progress progress-info progress-striped">
		                    <div class="bar" style="width: 30%;"></div>
		            </div>
		        </div>
		        <div class="span4">
		            <div class="progress progress-danger progress-striped active">
		                    <div class="bar" style="width: 45%"></div>
		            </div>
		        </div>
		    </div>
		    
		    <div class="progress">
		    	<div class="bar" style="width: 10%;"></div>
		        <div class="bar bar-success" style="width: 14%;"></div>
		        <div class="bar bar-warning" style="width: 16%;"></div>
		        <div class="bar bar-danger" style="width: 18%;"></div>
		    </div>
		    
		    <div class="progress progress-striped">
		    	<div class="bar" style="width: 15%;"></div>
		        <div class="bar bar-success progress-striped" style="width: 0%;"></div>
		        <div class="bar bar-warning progress-striped" style="width: 20%;"></div>
		        <div class="bar bar-danger progress-striped" style="width: 15%;"></div>
		    </div>
		    
		    <div class="progress progress-striped active">
		        <div class="bar bar-success" style="width: 55%;"></div>
		        <div class="bar bar-warning" style="width: 15%;"></div>
		        <div class="bar bar-danger" style="width: 20%;"></div>
		    </div>-->
    	</div>
    	
    	<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    	<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    	<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
    	<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    	<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    	
        <h3 id="labels">Labels</h3>

        <span class="label">Default</span>
        <span class="label label-success">Success</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-important">Important</span>
        <span class="label label-info">Info</span>        
    	<span class="label label-inverse">Inverse</span>
    	
        <h3 id="badges">Badges</h3>

        <span class="badge">1</span>
        <span class="badge badge-success">2</span>
        <span class="badge badge-warning">3</span>
        <span class="badge badge-important">4</span>
        <span class="badge badge-info">5</span>        
        <span class="badge badge-inverse">6</span>
    	            
 	</div>
 </section>